<script>
	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
	import { fade, fly } from 'svelte/transition';
	import { t } from 'svelte-i18n';
	import OverlayScrollbars from 'overlayscrollbars';
	import hotkeys from 'hotkeys-js';

	import { assets } from '$lib/store/app-stores';
	import ButtonModal from './ButtonModal.svelte';

	export let title = '';
	export let dark = false;
	export let blank = false;
	export let disabled = false;
	export let confirmOnly = false;
	export let noDimiss = false;

	let content;
	onMount(() =>
		OverlayScrollbars(content, { sizeAutoCapable: false, className: 'os-theme-light' })
	);

	const dispatch = createEventDispatcher();
	const confirmClick = () => dispatch('confirm');
	const cancelClik = () => dispatch('cancel');

	const dimiss = () => {
		if (confirmOnly || noDimiss) return;
		dispatch('cancel');
	};

	// Shortcut
	hotkeys('enter', 'modal', (e) => {
		e.preventDefault();
		if (disabled) return;
		confirmClick();
	});

	hotkeys('esc', 'modal', (e) => {
		e.preventDefault();
		cancelClik();
	});

	const currentScope = hotkeys.getScope();
	hotkeys.setScope('modal');
	onDestroy(() => hotkeys.deleteScope('modal', currentScope));
</script>

<div
	class="modal"
	class:dark
	in:fade={{ duration: 200 }}
	out:fade={{ duration: 80 }}
	on:mousedown|self={dimiss}
>
	<div
		class="modal-content"
		in:fly={{ y: 20, duration: 250, opacity: 1 }}
		out:fly={{ y: 50, duration: 100, opacity: 1 }}
	>
		<span class="corner top-left" />
		<span class="corner top-right" />
		<span class="corner bottom-left" />
		<span class="corner bottom-right" />
		<div class="container" style="--bg-icon:url({$assets['modal-bg-icon.png']})">
			{#if blank}
				<slot />
			{:else}
				{#if title}
					<h1 class="pop-header">{title}</h1>
				{/if}
				<div class="pop-body" bind:this={content}>
					<slot />
				</div>

				<div class="pop-footer">
					{#if !confirmOnly}
						<ButtonModal light={dark} type="cancel" on:click={cancelClik} />
					{/if}

					<ButtonModal light={dark} type="confirm" {disabled} on:click={confirmClick}>
						{#if $$slots.confirmtext}
							<slot name="confirmtext" />
						{:else}
							{$t('confirmButton')}
						{/if}
					</ButtonModal>
				</div>
			{/if}
		</div>
	</div>
</div>

<style>
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: var(--screen-height);
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 997;
		display: flex;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(2px);
	}

	.modal-content {
		width: 35rem;
		max-width: 90%;
		background-color: #fbf6ee;
		padding: 8px;
		text-align: center;
		color: #383b40;
		position: relative;
		border-radius: 0.8rem;
	}

	.dark .modal-content {
		background-color: #4a5265;
	}

	:global(.mobile) .modal-content {
		max-width: 110vh;
	}

	.container {
		width: 100%;
		height: 100%;
		border: 2px solid #ddd5c8;
		background-image: var(--bg-icon);
		background-repeat: no-repeat;
		background-size: 50%;
		background-position: 50%;
	}

	.corner {
		background-image: url('');
		background-size: cover;
		width: 2.35rem;
		aspect-ratio: 1/1;
		font-size: 1.5rem;
		display: inline-block;
		position: absolute;
	}

	.top-left {
		top: -0.9rem;
		left: -0.9rem;
		transform: rotate(-90deg);
	}
	.top-right {
		top: -0.9rem;
		right: -0.9rem;
	}
	.bottom-left {
		bottom: -0.9rem;
		left: -0.9rem;
		transform: rotate(-180deg);
	}
	.bottom-right {
		bottom: -0.9rem;
		right: -0.9rem;
		transform: rotate(90deg);
	}

	.pop-header {
		font-size: 130%;
		margin: 0.4rem 7%;
		padding-bottom: 0.4rem;
		border-bottom: 0.2rem solid #ddd5c8;
		position: relative;
		z-index: +1;
	}

	.dark .pop-header {
		color: rgba(210, 198, 156, 1);
	}

	:global(.mobile) .pop-header {
		font-size: 1rem;
	}

	.pop-body {
		height: 15rem;
		max-height: 45vh;
		position: relative;
		z-index: +1;
		font-size: 1.1rem;
		display: flex;
		justify-content: center;
	}

	.dark .pop-body {
		color: #fbf6ee;
	}

	:global(.mobile) .pop-body {
		height: 12rem;
		font-size: 0.9rem;
	}

	.pop-footer {
		display: flex;
		padding: 0.7rem 0;
		justify-content: space-around;
		position: relative;
		z-index: +1;
	}
	.pop-footer::before {
		width: 80%;
		content: '';
		display: block;
		border-top: 0.2rem solid #ddd5c8;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.dark .container,
	.dark .pop-header,
	.dark .pop-footer::before {
		border-color: rgba(210, 198, 156, 0.6);
	}
</style>
